import React, { Component } from 'react'
import {Text, View, TouchableOpacity} from 'react-native'
import {pxToDp} from '../../utils/stylesKits'
import SvgUri from 'react-native-svg-uri'
import {boySvg, girlSvg} from '../../asset/svg/svg'
import { Input } from 'react-native-elements'
import DatePicker from 'react-native-datepicker'
import Picker from 'react-native-picker';
import CityJson from '../../asset/citys.json'
import ImagePicker from 'react-native-image-crop-picker';
import THbtn from '../../components/THBtn'
import { ACCOUNT_CHECKHEADIMAGE, ACCOUNT_REGINFO } from '../../utils/mapPath'

import {inject,observer } from "mobx-react";
import request from '../../utils/request'
   
@inject("RootStore") // 注入 用来获取 全局数据的
@observer
export default class index extends Component {
  state = {
    gender: 'male',
    nickname: '',
    birthday: '',
    city: '北京',
    birthday: '',
    header: '',
    lng: '115.1111',
    lat: '23.1111',
    address: '河南省郑州市',
    Distance: 2581181.2,
  }

  componentDidMount() {
    console.log(this.props.RootStore)
  }

  chooseImage = async() => {
    
    let image = await ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true
    })
    let formData = new FormData()
    formData.append('headPhoto', {
      uri: image.path,
      type: image.mime,
      name: image.path.split('/').pop()
    })
    const res0 = await request.privatePost(ACCOUNT_CHECKHEADIMAGE, formData, {headers: {
      "Content-type": "multipart/form-data"
    }})

    // console.log(res0)
    alert(res0.code)
    if(res0.code !== '10000') {
      return ;
    }else{
      let params = this.state;
      params.header = res0.data.headImgePath
      console.log(params)
      const res1 = await request.privatePost(ACCOUNT_REGINFO,params)
      console.log(res1)
    }
  }

  chooseGender = (gender) => {
    this.setState({gender})
  }
  showCityPicker = () => {
    Picker.init({
      pickerData: CityJson,
      selectedValue: ["河南", "安阳"],
      wheelFlex: [1, 1, 0], // 显示省和市
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择城市",
      onPickerConfirm: data => {
        // data =  [广东，广州，天河]
        this.setState(
          {
            city: data[1]
          }
        );
      }
    });
    Picker.show();
  }

  render() {
    const {gender, nickname, birthday, city} = this.state
    const dateNow = new Date()
    const currentDate = `${dateNow.getFullYear()}-${dateNow.getMonth()+1}-${dateNow.getDate()}`
    return (
     <View style={{backgroundColor: '#fff', flex: 1, padding: pxToDp(20)}}>
       <Text style={{fontSize: pxToDp(20),color: '#666', fontWeight: 'bold'}}>填写资料</Text>
       <Text style={{fontSize: pxToDp(20),color: '#666', fontWeight: 'bold'}}>提升我的魅力值</Text>
       <View style={{marginTop: pxToDp(20)}}>
         <View style={{justifyContent: 'space-around', display: 'flex', flexDirection: 'row', alignSelf: "center", width: "60%"}}>
          <TouchableOpacity onPress={this.chooseGender.bind(this, 'male')} style={{width: pxToDp(60), height: pxToDp(60),borderRadius: pxToDp(60),backgroundColor: gender==='male'? 'red': '#eee', justifyContent: 'center',alignItems: 'center'}}>
            <SvgUri svgXmlData={boySvg} width='34' height='34' />
          </TouchableOpacity>
          <TouchableOpacity onPress={this.chooseGender.bind(this, 'female')} style={{width: pxToDp(60), height: pxToDp(60),borderRadius: pxToDp(60),backgroundColor:  gender==='female'? 'red': '#eee', justifyContent: 'center', alignItems: 'center'}}>
            <SvgUri svgXmlData={girlSvg} width='34' height='34' />
          </TouchableOpacity>
         </View>
       </View>
       <View>
        <Input 
          value={nickname}
          placeholder="请输入昵称"
          onChangeText={nickname=>{this.setState({nickname})}} />
       </View>
       <View>
        <DatePicker
          androidMode='spinner'
          style={{width: '100%'}}
          date={birthday}
          mode="date"
          placeholder="设置生日"
          format="YYYY-MM-DD"
          minDate="1900-05-01"
          maxDate={currentDate}
          confirmBtnText="确认"
          cancelBtnText="取消"
          customStyles={{
            dateIcon: {
              display: 'none'
            },
            dateInput: {
              marginLeft: pxToDp(10),
              borderWidth: 0,
              borderBottomWidth:pxToDp(1.1),
              alignItems: 'flex-start',
              paddingLeft: pxToDp(4)
            },
            placeholderText: {
              fontSize:pxToDp(18),
              color: '#afafaf'
            }
            // ... You can check the source to find the other keys.
          }}
          onDateChange={(date) => {this.setState({birthday: date})}}
        />

       </View>
       <View style={{marginTop: pxToDp(20)}}>
         <TouchableOpacity
          onPress={this.showCityPicker}
          >
           <Input 
            disabled
            value={`当前城市${city}`}
            placeholder="" />
         </TouchableOpacity>
       </View>
       <View>
          <THbtn
            onPress={this.chooseImage} 
            style={{
              height: pxToDp(40),
              alignItems: 'center'
          }}>获取头像</THbtn>
       </View>
     </View>
    )
  }
}
